<template>
  <br />
  <z-avatar-group>
    <z-space>
      <z-avatar src="https://joeschmoe.io/api/v1/random" />
      <z-avatar style="background-color: #f56a00">K</z-avatar>
      <z-tooltip title="Ant User" placement="top">
        <z-avatar style="background-color: #87d068">
          <template #icon><UserOutlined /></template>
        </z-avatar>
      </z-tooltip>
      <z-avatar style="background-color: #1890ff">
        <template #icon><UserOutlined /></template>
      </z-avatar>
    </z-space>
  </z-avatar-group>
  <z-divider />
  <z-avatar-group
    :max-count="2"
    :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }"
  >
    <z-space>
      <z-avatar src="https://joeschmoe.io/api/v1/random" />
      <z-avatar style="background-color: #1890ff">K</z-avatar>
      <z-tooltip title="Ant User" placement="top">
        <z-avatar style="background-color: #87d068">
          <template #icon><UserOutlined /></template>
        </z-avatar>
      </z-tooltip>
      <z-avatar style="background-color: #1890ff">
        <template #icon><UserOutlined /></template>
      </z-avatar>
    </z-space>
  </z-avatar-group>
  <z-divider />
  <z-avatar-group
    :max-count="2"
    size="large"
    :max-style="{
      color: '#f56a00',
      backgroundColor: '#fde3cf',
    }"
  >
    <z-space>
      <z-avatar src="https://joeschmoe.io/api/v1/random" />
      <z-avatar style="background-color: #1890ff">K</z-avatar>
      <z-tooltip title="Ant User" placement="top">
        <z-avatar style="background-color: #87d068">
          <template #icon><UserOutlined /></template>
        </z-avatar>
      </z-tooltip>
      <z-avatar style="background-color: #1890ff">
        <template #icon><UserOutlined /></template>
      </z-avatar>
    </z-space>
  </z-avatar-group>
</template>
